<template>
  <div class="SingerInfo">
    <div class="SingerInfo_left">
      <div class="header">
        <h3>{{ SingerInfoList.name }}</h3>
        <div class="header_a"><img :src="SingerInfoList.cover" /></div>
      </div>
      <ul class="nav">
        <li :class="{ show: this.name == 'A' }">
          <router-link :to="`/SingerInfo/${this.$route.params.id}/SingerInfoA`"
            >热门作品</router-link
          >
        </li>
        <li :class="{ show: this.name == 'B' }">
          <router-link :to="`/SingerInfo/${this.$route.params.id}/SingerInfoB`"
            >所有专辑</router-link
          >
        </li>
        <li :class="{ show: this.name == 'C' }">
          <router-link :to="`/SingerInfo/${this.$route.params.id}/SingerInfoC`"
            >相关MV</router-link
          >
        </li>
        <li :class="{ show: this.name == 'D' }">
          <router-link :to="`/SingerInfo/${this.$route.params.id}/SingerInfoD`"
            >艺人介绍</router-link
          >
        </li>
      </ul>
      <router-view :key="$route.fullPath"></router-view>
    </div>
    <div class="SingerInfo_right">
      <!-- 热门歌手 -->
      <div class="similar">
        <div class="similar_header">
          <h3>相似歌手</h3>
        </div>
        <ul class="similar_content">
          <li v-for="(v,i) in similarList" :key="i">
            <div class="similar_a"><router-link :to="`/singerInfo/${v.id}`"><img :src="v.img1v1Url"></router-link></div>
            <div class="similar_b"><router-link :to="`/singerInfo/${v.id}`">{{v.name}}</router-link></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      // 歌手详情数据
      SingerInfoList: {},
      // 相似歌手数据
      similarList: {},
    };
  },
  //
  methods: {
    // 获取歌手详情数据
    getSingerInfoList() {
      axios
        .get(`http://127.0.0.1:3000/artist/detail?id=${this.$route.params.id}`)
        .then((res) => {
          this.SingerInfoList = res.data.data.artist;
        });
    },
    // 获取相似歌手数据
    getsimilarList() {
      axios
        .get(`http://127.0.0.1:3000/simi/artist?id=${this.$route.params.id}`)
        .then((res) => {
          this.similarList = res.data.artists;
          this.similarList.splice(6)
        });
    },
  },
  //
  created() {
    this.getSingerInfoList();
    this.getsimilarList();
    this.name = this.$router.history.current.name;
  },
};
</script>
<style scoped>
.SingerInfo {
  display: flex;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}
.SingerInfo .SingerInfo_left {
  width: 810px;
  padding: 20px 30px 40px 39px;
  border-right: 1px solid #d3d3d3;
}
.SingerInfo .SingerInfo_right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
.SingerInfo .SingerInfo_left .header h3 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 8px;
}
.SingerInfo .SingerInfo_left .header .header_a {
  height: 300px;
  border: 1px solid #c8c8c8;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.SingerInfo .SingerInfo_left .header .header_a img {
  width: 100%;
  height: 550px;
}
.SingerInfo .SingerInfo_left .nav {
  display: flex;
}
.SingerInfo .SingerInfo_left .nav li {
  flex: 1;
  text-align: center;

  border: 1px solid #ccc;
  border-top: 2px solid transparent;
}
.SingerInfo .SingerInfo_left .nav li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 14px;
}
.SingerInfo .SingerInfo_left .nav li:hover {
  border-top: 2px solid #d13030;
}
.SingerInfo .SingerInfo_left .nav .show {
  border-top: 2px solid #d13030;
  border-bottom: none;
}
.similar_header{
  border-bottom: 1px solid #cccccc;
  padding-bottom: 5px;
}
.similar_header h3{
  font-size: 12px;
}
.similar_content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.similar_content li{
  padding-bottom: 20px;
}
.similar_content li .similar_a a img{
  width: 50px;
  height: 50px;
}
.similar_content li .similar_b{
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.similar_content li .similar_b a{
  font-size: 12px;
}
.similar_content li .similar_b a:hover{
  text-decoration: underline;
}
</style>